<script setup lang="ts">
import CoinState from "./components/CoinState/index.vue";
import JType from "@/components/j-type/index.vue";
import List from "./components/List.vue";
import Cheart from "./components/Cheart.vue";
import { useChart } from "@/hooks/useChart";
import { onMounted, onUnmounted, ref, reactive, watch, computed } from "vue";
import { useRoute } from "vue-router";
import { useLayout } from "@/stores/layout";
import { URL_TOLEM_BIGAMOUNT } from "@/comm/api";
import { get } from "@/comm/request";
import { sortList } from "@/comm/tooler";
import JLoding from "@/components/j-loding/index.vue";
import { getTimer } from "@/components/chart/core/tooler";
import TableBS from "@/components/chart/component/tableBS.vue";
import TableMore from "@/components/chart/component/tableMore.vue";
const layout = useLayout();
const route = useRoute();
const klines = ref<any[]>([]);
const hlines = ref<any[]>([]);
const kType = ref("H");
const { initChart, changeChartStyle, resizeChart, getKlineData, appendIndicator, maxUsdDay, setZoomAt, loading, curItem, moreList, tables, KLineType } = useChart();
onMounted(async () => {
    await updateKline("H");
});
watch(
    () => layout.newsOpen,
    (newVal, oldVal) => {
        resizeChart();
    }
);

const onBSHide = () => {
    tables.bs.x = -1200;
};

const onMoreHide = () => {
    tables.more.x = -1200;
};
onUnmounted(() => {
    window.removeEventListener("resize", resizeChart);
});
const onType = (item: any) => {
    kType.value = item.value;
    if (item.value == "H") {
        updateKline("H");
    } else if (item.value == "D") {
        updateKline("D");
    } else {
        KLineType.value = item.label.indexOf("line") == -1 ? "area" : "candle_solid";
        changeChartStyle(item.label.indexOf("line") == -1);
    }
};
const updateKline = async (type: string) => {
    
    await initChart("on-line-chart", route.params.id + "", type, true);
    // changeChartStyle(false);
    klines.value = getKlineData();
    if (klines.value.length < 100) {
        setZoomAt(klines.value[klines.value.length - 1].timestamp)
    }
    // console.log("K线图数据===============>", klines.value);
    appendIndicator("VOL", false);
    const params = {
        startTime: klines.value[0]?.timestamp,
        endTime: klines.value[klines.value.length - 1]?.timestamp
    };

    let res: any = await get(URL_TOLEM_BIGAMOUNT.replace("@", route.params.id + ""), params);
    console.log("大额异动返回==================》", res.data);
    hlines.value = res.data;
    hlines.value?.forEach((val: any) => {
        val.timestamp = val.time;
        delete val.time;
    });
    sortList(hlines.value, "timestamp", false);
    maxUsdDay(klines.value, hlines.value, type);
    window.addEventListener("resize", resizeChart);
};
</script>

<template>
    <div class="chinCoin">
        <div>
            <CoinState :kline="klines" :kType="kType"></CoinState>
            <div class="cs-line">
                <div class="nav-cs">
                    <JType @change="onType"></JType>
                </div>
            </div>
            <div class="chart-wrap">
                <div class="chart" id="on-line-chart"></div>
                <JLoding v-if="loading"></JLoding>
                <TableBS page="token" :pot="tables.bs" :item="curItem" @hide="onBSHide"></TableBS>
                <TableMore page="token" :pot="tables.more" :list="moreList" @hide="onMoreHide"></TableMore>
            </div>
        </div>
        <div class="list mt-space">
            <List></List>
        </div>
        <div class="chart2 mt-space">
            <Cheart :klines="klines" :title="$t('message.Token.a')"></Cheart>
        </div>
        <div class="chart2 mt-space">
            <Cheart :klines="klines" :title="$t('message.Token.b')"></Cheart>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.list {
    margin: var(--space) 0 var(--space) 0;
}

.chart2 {
    height: 400px;
}

.mt-space {
    margin-bottom: var(--space);
}

.hder {
    height: 100%;
}

.chinCoin {
    background-color: var(--bgs);
    margin-inline: var(--space);
    // padding-bottom: var(--space);
    padding-bottom: 30px;
}

.cs-line {
    background-color: var(--card);
    padding: var(--space) var(--space) var(--space);
}

.chart-wrap {
    box-sizing: border-box;
    height: calc(100vh - 390px);
    position: relative;
    background-color: var(--card);

    // padding-bottom: 36%;
    // position: relative;
    .chart {
        // position: absolute;
        // left: 10px;
        // top: 10px;
        // right: 10px;
        // bottom: 20px;
        margin: auto;
        width: 98%;
        height: 100%;
    }
}



.nav-cs {
    padding: 0 0 10px 0;
}
</style>
